<template>
	<view class="home-style">
		<view class="home-style-content">
			<view class="home-style-header">
				<text></text>
			</view>
			<template>
				<view class="container">
					<view class="item" v-for="(item, index) in props.articleData" :key="index">
						<div class="style-container">
							<image :src="item.image" mode="aspectFit"></image>
						</div>
						<view class="style-header-title">
							<text></text>
						</view>
						<view class="style-header">

						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script lang="ts" setup>
	interface articleType {
		articleData : Array<{ image : string, title : string, text : string }>
	}
	const props = defineProps<{
		articleData : articleType['articleData']
	}>()
</script>

<style lang="scss" scoped>
	.container {
		column-count: 2;
		/* 分为两列 */
		column-gap: 10px;
		/* 列与列之间的间隔 */
		padding: 10px;
	}

	.item {
		break-inside: avoid;
		/* 避免内容被分割到两列 */
		margin-bottom: 10px;

		image {
			width: 330rpx;
			height: 340rpx;
		}
	}

	img {
		width: 100%;
		/* 图片宽度自适应列宽 */
		height: auto;
		/* 高度自动调整 */
	}
</style>